import React from "react";
import {atom,useRecoilState, useRecoilValue} from "../../recoils";
import styleFromA from "./testb.module.css";
import {stateFromA} from "../testA";

const stateFromB = atom({
    key: 'stateFromB',
    default: 'stateFromB'
})


export default function TestB() {

    const valueFromA = useRecoilValue(stateFromA);
    const [fromB, setFromB] = useRecoilState(stateFromB);
    console.log('组件B渲染了')

    return (<div className={styleFromA.container}>

        <div>
            <input type="text" value={fromB} onChange={(event => setFromB(event.target.value))}/>
            {fromB}
        </div>

        <div>
            <p>来自A的Atom {valueFromA}</p>
        </div>
    </div>)
}
